<template>
	<view class="out_box">
		<view class="input_box">
			<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" class="uni_input" />
			<img src="../../static/center/Bg.png" alt="" class="bg" />
			<img src="../../static/center/sl.png" alt="" class="sl" />
			<img src="../../static/center/cye.png" alt="" class="cye"/>
			<img src="../../static/center/text.png" alt="" class="foodtext">
			<img src="../../static/center/text1.png" alt="" class="foodtext1">
		</view>
		
		<view class="yundong">
			<view class="vip_box">
				<img src="../../static/center/vip.png" alt="" class="vip_img" />
				<view class="vip_text">
					<p class="vip_food">坚持运动</p>
					<text class="vip_food1">享受健康生活</text>
				</view>
			</view>
		</view>

		<text class="recommend">今日推荐</text>
		
		<view @click="toPage">
			<uni-section type="line">
				<uni-grid :column="2" :square="false" :highlight="false">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<uni-section type="line">
							<uni-card :cover="cover">
								<image slot='cover' style="width: 100%;" :src="cover"></image>
								<p class="uni-body">{{item.text}}</p>
								<text class="uni-body1">1111</text>
							</uni-card>
						</uni-section>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},

				dynamicList: [],
				
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				]
			}
		},
		methods: {
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			toPage() {
				uni.navigateTo({
					url: '/pagesTwo/vipPage/vipPage'
				});
			}
		}
	}
</script>

<style lang="scss">
	.out_box {
		width: 100%;
		height: 100%;
		flex-direction: column;
		justify-content: center;
	}
	.yundong{
		margin-top: 49rpx;
		background-color: #fff;
		width: 100%;
		height: 400rpx;
	}
	.uni-section1{
		position: relative;
		top: 11rpx;
	}
	
	.foodtext{
		position: relative;
		top: -611rpx;
		left: 158rpx;
		height: 50rpx;
		width: 200rpx;
	}
	.foodtext1{
		position: relative;
		top: -553rpx;
		left: 28rpx;
		height: 50rpx;
		width: 200rpx;
	}
	
	.bg {
		position: relative;
		margin-top: -427rpx;
		margin-left: 357rpx;
		width: 500rpx;
		height: 500rpx;
		z-index: -11;
	}

	.sl {
		position: relative;
		top: -300rpx;
		left:470rpx;
		width: 300rpx;
		height: 300rpx;
		z-index: -10;
	}
	
	.cye{
		position: relative;
		top:-350rpx;
		left:-400rpx;
		width: 300rpx;
		height: 300rpx;
		z-index: -11;
	}

	.vip_text {
		margin-top: -222rpx;
		margin-left: 67rpx;
	}

	.vip_food {
		color: #F19609;
	}

	.vip_food1 {
		color: #C38512;
		font-size: 23rpx;

	}

	.vip_box {
		height: 312rpx;
		width: 660rpx;
		background-color: #F3D399;
		margin: auto;
		position: relative;
		top: 22rpx;
		margin-bottom: 20rpx;
		border-radius: 50rpx;
	}

	.vip_img {
		height: 250rpx;
		width: 300rpx;
		margin-top: 80rpx;
		margin-left: 350rpx;
	}

	.recommend {
		margin: 0 0 0 32rpx;
	}

	.uni-body1 {
		color: #666;
		font-size: 23rpx;
	}

	.img {
		height: 50rpx;
		width: 50rpx;
	}

	.input_box {
		// background-color: #000000;
		height: 200rpx;
		// position: relative;
		position: relative;
		top: 140rpx;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 50px;
	}

	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}


	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
</style>